/********************************************************************************
 *@description: 抽奖奖品表格
 *@author: Xhd
 *@API: 
 *@date: 2024-01-16 17:13:49
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import { Modal, Form, Input, Select, Popconfirm, InputNumber, Space, Tag, Button, Row, Col, } from 'antd';
import TheButton from '@/components/TheButton';
import TheUpload from '@/components/TheUpload';
import PropTypes from 'prop-types';
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import Coupons from './coupons';
import './style.less';
import { apiGetGoodsList, apiGetGoodsDetail, } from '@/request/marketingTool';
import { apiGetStockLibraryManageId } from '@/request/lotteryTools';

const { Option } = Select

class Prize extends Component {
  constructor(props) {
    super(props)
    this.formRef = React.createRef();
    this.addFormRef = React.createRef();
    this.state = {
      capture: false,//拖动元素是否被捕获
      checkStart: false,
      eidtKey: '',
      isDragDisabled: false,
      prizePrefectureName: null,
      modalTitle: '添加奖品专区',
      isModalVisible: false,
      isGoodsModalVisible: false,
      goodsSku: [],
      prizeData: [],
      columns: [
        {
          title: "唯一标识",
          dataIndex: "prizeOpenid",
          key: "prizeOpenid",
        },
        {
          title: "奖品原始名称",
          dataIndex: "prizeOriginalName",
          key: "prizeOriginalName",
        },
        {
          title: "数量（仅哈哈豆 宠币可用）",
          dataIndex: "prizeCount",
          key: "prizeCount",
        },
        {
          title: "奖品名称",
          dataIndex: "prizeName",
          key: "prizeName",
        },
        {
          title: "奖品图片",
          dataIndex: "prizeImages",
          key: "prizeImages",
        },
        {
          title: "奖品价值",
          dataIndex: "prizeCost",
          key: "prizeCost",
        },
        // {
        //   title: "奖品有效期（仅实物商品可用）",
        //   dataIndex: "prizeValidityPeriod",
        //   key: "prizeValidityPeriod",
        // },
        {
          title: "操作",
          dataIndex: "doing",
          key: "doing",
        },
      ],
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      searchValue: {},
      searchOption: [],
      selectOptions: [
        { label: "一等奖", value: 1 },
        { label: "二等奖", value: 2 },
        { label: "三等奖", value: 3 },
        { label: "四等奖", value: 4 },
        { label: "五等奖", value: 5 },
        { label: "六等奖", value: 6 }
      ],
      prizeLevel: [
        "一等奖",
        "二等奖",
        "三等奖",
        "四等奖",
        "五等奖",
        "六等奖"
      ],
      nowlevel: "",
      goodsList: [],
      productSku: [],
      currentSku: [],
      couponSelectedKeys: [],
      isCoupons: false,
      activityEndTime: "",
      fileList: [],
      libraryId: "",
      confirmLoading: false
    }
  }
  componentDidMount() {
    this.getGoodsList()
  }
  // getStockLibraryId = async () => {
  //   await apiGetStockLibraryManageId().then(res => {
  //     if (res.code === 0) {
  //       this.setState({
  //         libraryId: res.data
  //       }, () => {
  //         this.getGoodsList()
  //       })
  //     }
  //   })
  // }

  getGoodsList = async () => {
    let res = await apiGetGoodsList({ type: 1 })
    if (res.code === 0) {
      this.setState({
        goodsList: res.data,
      })
    }
  }
  selectFilter(input, option) {
    const materialIds = option.option.materialIds.toLowerCase().split(',')
    const result = option.children.toLowerCase().includes(input.toLowerCase()) || materialIds.includes(input.toLowerCase())
    return result
  }
  goodsChange(e, row) {
    this.apiGetGoodsDetail(e)
  }
  async apiGetGoodsDetail(goodsId) {
    let res = await apiGetGoodsDetail({ goodsId, libraryId: this.state.libraryId })
    if (res.code === 0) {
      if (this.state.materialId) {
        let result = res.data.skuInfo.filter(item => item.materialId === this.state.materialId)
        this.setState({
          productSku: res.data,
          currentSku: result.length > 0 ? result[0] : res.data.skuInfo[0]
        })
      } else {
        this.setState({
          productSku: res.data,
          currentSku: res.data.skuInfo[0]
        })
      }
      this.addFormRef.current.setFieldsValue({
        price: res.data.skuInfo[0].price
      })
    }
  }
  triggerSkuTag(row) {
    this.setState({
      currentSku: row
    })
    this.addFormRef.current.setFieldsValue({
      price: row.price
    })
  }
  onBlur = (materialId) => {
    this.setState({
      materialId
    })
  }
  reset() {
    this.addFormRef.current.setFieldsValue({
      nowCount: null,
      goodsId: '',
      dataType: '',
      unitPrice: '',
      price: ''
    })
    this.setState({
      productSku: {},
      currentSku: {}
    })
  }

  // 在拖动结束时
  onDragEnd = (result) => {
    const { goodsSku } = this.state
    const sourceIndex = result.source.index; //原位置索引
    this.setState({
      capture: false
    })
    if (!result.destination) return
    const destinationIndex = result.destination.index;//拖拽后得位置索引
    if (sourceIndex === destinationIndex) return
    let key = result.draggableId.split('_')[1]
    const [draggedItem] = goodsSku.splice(sourceIndex, 1)
    goodsSku.splice(destinationIndex, 0, draggedItem);
    this.setState({
      goodsSku: goodsSku,
    });
  }
  // 在捕获之前
  onBeforeCapture = (result) => {
    this.setState({
      capture: true
    })
  };
  // 在拖动开始之前
  onBeforeDragStart = (result) => {
    // console.log(result, '在拖动开始之前');
  };
  // 在拖动开始时
  onDragStart = (result) => {
    // console.log(result, '在拖动开始时');
  };
  // 在拖动变化时
  onDragUpdate = (result) => {
    // console.log(result, '在拖动变化时');
  };
  //添加奖品专区
  addPromotions = () => {
    this.setState({
      prizePrefectureName: null,
      isModalVisible: true,
      modalTitle: '添加奖品专区',
    }, () => {
      this.formRef.current.setFieldsValue({ prizePrefectureName: null })
    })
  }
  handleOk = () => {
    this.formRef.current.validateFields().then(values => {
      this.setState({ prizePrefectureName: values.prizePrefectureName, level: values.prizeLevel, confirmLoading: true })
      // 添加活动商品专区
      let { goodsSku, prizeData, prizePrefectureName, nowPromotions, modalTitle, nowlevel, level } = this.state
      let flag = goodsSku.filter(item => item[0] === prizePrefectureName)
      let levelFlag = goodsSku.filter(item => item[4] === level)
      if (prizePrefectureName === '') return
      if (modalTitle === '添加奖品专区') {
        if (flag.length > 0) {
          React.$message({
            type: 'warning',
            content: '已存在相同奖品专区！'
          })
          this.setState({ confirmLoading: false })
          return
        }
        if (levelFlag.length > 0) {
          React.$message({
            type: 'warning',
            content: '已存在相同等级奖品！'
          })
          this.setState({ confirmLoading: false })
          return
        }
        goodsSku.push([prizePrefectureName, [], null, true, values.prizeLevel, null, null, false, false])
        // prizeData.push([prizePrefectureName, [], null, true, values.prizeLevel, null, null,])
      } else {
        if (flag.length > 0 && prizePrefectureName !== nowPromotions) {
          React.$message({
            type: 'warning',
            content: '已存在相同奖品专区！'
          })
          this.setState({ confirmLoading: false })
          return
        }
        if (levelFlag.length > 0 && level !== nowlevel) {
          React.$message({
            type: 'warning',
            content: '已存在相同等级奖品！'
          })
          this.setState({ confirmLoading: false })
          return
        }
        let index = goodsSku.findIndex(item => item[0] === nowPromotions)
        goodsSku[index] = [prizePrefectureName, goodsSku[index][1], goodsSku[index][2], goodsSku[index][3], values.prizeLevel, goodsSku[index][5], goodsSku[index][6], false, false]
        // prizeData[index] = [prizePrefectureName, prizeData[index][1], prizeData[index][2], prizeData[index][3], values.prizeLevel, prizeData[index][5], prizeData[index][6], false, false]
      }
      this.formRef.current.setFieldsValue({ prizePrefectureName: null, prizeLevel: null })
      this.setState({
        isModalVisible: false,
        goodsSku,
        // prizeData,
        confirmLoading: false
      })
    })
  };
  // 编辑活动专区
  editPromotions = (key) => {
    // console.log(key);
    this.setState({
      isModalVisible: true,
      modalTitle: '编辑奖品专区',
      prizePrefectureName: key[0],
      nowPromotions: key[0],
      nowlevel: key[4],
      level: key[4],
    }, () => {
      this.formRef.current.setFieldsValue({ prizePrefectureName: key[0], prizeLevel: parseInt(key[4]) })
    })
  }
  handleCancel = () => {
    this.formRef.current.resetFields()
    this.setState({
      isModalVisible: false
    })
  };
  // 活动专区移除
  delPromotions = (key, index) => {
    const { goodsSku, prizeData } = this.state
    goodsSku.splice(index, 1)
    // prizeData.splice(index, 1)
    // let newArray = prizeData[index][1].filter(item => {
    //   if (item.lotteryDrawPrizeId) {
    //     item.deleted = 1;
    //     return true;
    //   } else {
    //     return false;
    //   }
    // });
    // prizeData[index][1] = newArray
    // if (prizeData[index][1].length === 0) {
    //   prizeData.splice(index, 1)
    // }
    this.setState({
      goodsSku,
      // prizeData
    })
  }
  // 删除专区内活动选择的活动商品
  delGoods = (row, index) => {
    const { goodsSku, prizeData } = this.state
    let self = this;
    let newData = [...goodsSku]
    // let newGoodsSku = JSON.parse(JSON.stringify(prizeData))
    let key = row.prizePrefectureName
    let PromotionsIndex = newData.findIndex(item => item[0] === key)
    // if (newGoodsSku[PromotionsIndex][1][index].lotteryDrawPrizeId) {
    //   newGoodsSku[PromotionsIndex][1][index].deleted = 1
    // } else {
    //   newGoodsSku[PromotionsIndex][1].splice(index, 1)
    // }
    newData[PromotionsIndex][1].splice(index, 1)
    this.setState({ goodsSku: [] }, () => {
      self.setState({
        goodsSku: newData,
        // prizeData: newGoodsSku
      })
    })
  }
  //中奖权重
  prizeWeight = (value, index) => {
    let { goodsSku, prizeData } = this.state
    let newGoods = [...goodsSku]
    newGoods[index][5] = value.target.value
    // prizeData[index][5] = value.target.value
    this.setState({ goodsSku: newGoods, prizeData })
  }
  //奖品解锁次数
  prizeMinimum = (value, index) => {
    let { goodsSku, prizeData } = this.state
    let newGoods = [...goodsSku]
    newGoods[index][6] = value
    // prizeData[index][6] = value
    this.setState({
      goodsSku: newGoods,
      // prizeData
    })
  }
  // 活动专区添加商品
  addGoods = (key, val, index) => {
    this.setState({
      isGoodsModalVisible: true
    })
    let { goodsSku, nowStep } = this.state
    let checkGoods = []
    goodsSku.forEach(item => {
      let arr = item[1].map(item2 => item[0] + '-' + item2.goodsId)
      if (arr.length > 0) checkGoods = checkGoods.concat(arr)
    })
    this.setState({
      nowStep: index,
      checkGoods: checkGoods
    })
  }
  onFinishAdd = (values) => {
    let { currentSku, goodsSku, productSku, nowStep } = this.state
    if (goodsSku[nowStep][1].length >= 20) {
      React.$message({
        type: 'warning',
        content: '当前奖品等级商品已达上限'
      })
      return
    }
    // console.log(currentSku, productSku);
    // let newGoodsSku = JSON.parse(JSON.stringify(prizeData))
    // newGoodsSku[nowStep][1].push({
    //   dataId: currentSku.goodsSkuId,
    //   prizePrefectureName: newGoodsSku[nowStep][0],
    //   prizeOpenid: currentSku.goodsSkuId,
    //   prizeOriginalName: currentSku.materialName,
    //   prizeType: "SW",
    //   prizeCount: "1",
    //   prizeName: "",
    //   prizeImages: currentSku.imageFile,
    //   prizeCost: "",
    //   prizeValidityPeriod: "",
    //   prizeWeight: newGoodsSku[nowStep][5],
    //   prizeMinimum: newGoodsSku[nowStep][6],
    //   prizeLevel: newGoodsSku[nowStep][4],
    // })
    goodsSku[nowStep][1].push({
      dataId: currentSku.goodsSkuId,
      prizePrefectureName: goodsSku[nowStep][0],
      prizeOpenid: currentSku.goodsSkuId,
      prizeOriginalName: currentSku.materialName,
      prizeGoodsName: productSku.goodsInfo.goodsName,
      prizeType: "SW",
      prizeCount: "1",
      prizeName: "",
      prizeImages: currentSku.imageFile,
      prizeCost: "",
      // prizeValidityPeriod: "",
      prizeWeight: goodsSku[nowStep][5],
      prizeMinimum: goodsSku[nowStep][6],
      prizeLevel: goodsSku[nowStep][4],
      fileList: [{
        uid: '-1',
        name: "image",
        url: currentSku.imageFile,
      }]
    })
    this.addFormRef.current.resetFields()
    this.setState({
      // prizeData: newGoodsSku,
      isGoodsModalVisible: false,
      productSku: {}
    })
  }
  //添加优惠券
  addCoupons = (key, val, index) => {
    let { goodsSku } = this.state
    if (this.props.activityEndTime) {
      if (goodsSku[index][1].length >= 20) {
        React.$message({
          type: 'warning',
          content: '当前奖品等级商品已达上限'
        })
        return
      }
      this.setState({
        isCoupons: true,
        index,
      })
    } else {
      React.$message({
        type: 'warning',
        content: '请先添加活动日期后添加优惠券'
      })
    }
  }
  handleCouponCancel = () => {
    this.setState({
      isCoupons: false,
      index: null
    })
  }
  handleCouponOk = (value) => {
    let { index, goodsSku, prizeData } = this.state
    let obj = value.coupons[0]
    // console.log(obj);
    // let newGoodsSku = JSON.parse(JSON.stringify(prizeData))
    // let prizeValidityPeriod = ""
    // switch (obj.timeType) {
    //   case 0:
    //     prizeValidityPeriod = obj.endTime
    //     break;
    //   case 1:
    //     prizeValidityPeriod = "领券后" + obj.effectiveTime + "天内可用"
    //     break;
    //   case 2:
    //     prizeValidityPeriod = "领券后" + obj.takeEffectTime + "天后生效，" + obj.effectiveTime + "天内可用"
    //     break;
    //   default:
    //     break;
    // }
    goodsSku[index][1].push({
      dataId: obj.couponId,
      prizePrefectureName: goodsSku[index][0],
      prizeOpenid: obj.couponId,
      prizeOriginalName: obj.couponTitle,
      prizeType: "YHQ",
      prizeCount: "1",
      prizeName: "",
      prizeImages: "",
      prizeCost: "",
      // prizeValidityPeriod,
      prizeWeight: goodsSku[index][5],
      prizeMinimum: goodsSku[index][6],
      prizeLevel: goodsSku[index][4],
      conponEndDate: obj.endTime ? obj.endTime : "",
      conponActiveStatus: obj.activeStatus,
      fileList: []
    })
    // newGoodsSku[index][1].push({
    //   dataId: obj.couponId,
    //   prizePrefectureName: goodsSku[index][0],
    //   prizeOpenid: obj.couponId,
    //   prizeOriginalName: obj.couponTitle,
    //   prizeType: "YHQ",
    //   prizeCount: "1",
    //   prizeName: "",
    //   prizeImages: "",
    //   prizeCost: "",
    //   prizeValidityPeriod: "",
    //   prizeWeight: goodsSku[index][5],
    //   prizeMinimum: goodsSku[index][6],
    //   prizeLevel: goodsSku[index][4],
    //   conponEndDate: obj.activityStopTime ? obj.activityStopTime : "",
    // })
    this.setState({
      isCoupons: false,
      // prizeData: newGoodsSku
    })

  }
  addHhd = (key, val, index) => {
    let { goodsSku, prizeData } = this.state
    if (goodsSku[index][1].length >= 20) {
      React.$message({
        type: 'warning',
        content: '当前奖品等级商品已达上限'
      })
      return
    }
    // let newGoodsSku = JSON.parse(JSON.stringify(prizeData))
    // newGoodsSku[index][1].push({
    //   prizePrefectureName: newGoodsSku[index][0],
    //   prizeOpenid: "",
    //   prizeOriginalName: "哈哈豆",
    //   prizeType: "HHD",
    //   prizeCount: "",
    //   prizeName: "",
    //   prizeImages: "",
    //   prizeCost: "",
    //   prizeValidityPeriod: "",
    //   prizeWeight: newGoodsSku[index][5],
    //   prizeMinimum: newGoodsSku[index][6],
    //   prizeLevel: newGoodsSku[index][4],
    // })
    goodsSku[index][1].push({
      prizePrefectureName: goodsSku[index][0],
      prizeOpenid: "--",
      prizeOriginalName: "哈哈豆",
      prizeType: "HHD",
      prizeCount: "",
      prizeName: "",
      prizeImages: "",
      prizeCost: "",
      // prizeValidityPeriod: "",
      prizeWeight: goodsSku[index][5],
      prizeMinimum: goodsSku[index][6],
      prizeLevel: goodsSku[index][4],
      fileList: []
    })
    this.setState({
      // prizeData: newGoodsSku
    })
  }
  addPetCoin = (key, val, index) => {
    let { goodsSku, prizeData } = this.state
    if (goodsSku[index][1].length >= 20) {
      React.$message({
        type: 'warning',
        content: '当前奖品等级商品已达上限'
      })
      return
    }
    // let newGoodsSku = JSON.parse(JSON.stringify(prizeData))
    // newGoodsSku[index][1].push({
    //   prizePrefectureName: newGoodsSku[index][0],
    //   prizeOpenid: "",
    //   prizeOriginalName: "宠币",
    //   prizeType: "CB",
    //   prizeCount: "",
    //   prizeName: "",
    //   prizeImages: "",
    //   prizeCost: "",
    //   prizeValidityPeriod: "",
    //   prizeWeight: newGoodsSku[index][5],
    //   prizeMinimum: newGoodsSku[index][6],
    //   prizeLevel: newGoodsSku[index][4],
    // })
    goodsSku[index][1].push({
      prizePrefectureName: goodsSku[index][0],
      prizeOpenid: "--",
      prizeOriginalName: "宠币",
      prizeType: "CB",
      prizeCount: "",
      prizeName: "",
      prizeImages: "",
      prizeCost: "",
      // prizeValidityPeriod: "",
      prizeWeight: goodsSku[index][5],
      prizeMinimum: goodsSku[index][6],
      prizeLevel: goodsSku[index][4],
      fileList: []
    })
    // this.props.addGoodsSku(goodsSku)
    this.setState({
      // goodsSku,
      // prizeData: newGoodsSku
    })
  }
  //奖品图片
  getFileResult = (key, value, index) => {
    let { goodsSku, prizeData } = this.state
    if (value.length) {
      let str = value.map(v => {
        if (v.response && v.response.code === 0) {
          return v.response.data
        }
      }).join(',')
      goodsSku[key][1][index].prizeImages = str
      // prizeData[key][1][index].prizeImages = str
      goodsSku[key][1][index].fileList = [
        {
          uid: '-1',
          name: "image",
          url: str
        }
      ]
      goodsSku[key][1][index].prizeImagesFalg = false
    } else {
      goodsSku[key][1][index].prizeImages = ""
      // prizeData[key][1][index].prizeImages = ""
      goodsSku[key][1][index].prizeImagesFalg = true
    }
  }
  prizeDataChange = (type, val, item, index) => {
    let { goodsSku, prizeData } = this.state
    // let newGoodsSku = JSON.parse(JSON.stringify(goodsSku))
    switch (type) {
      case "prizeCount":
        if (val.target.value) {
          goodsSku[item][1][index].prizeCountFalg = false
        } else {
          goodsSku[item][1][index].prizeCountFalg = true
        }
        goodsSku[item][1][index].prizeCount = val.target.value
        // prizeData[item][1][index].prizeCount = val
        break;
      case "prizeCost":
        if (val) {
          goodsSku[item][1][index].prizeCostFalg = false
        } else {
          goodsSku[item][1][index].prizeCostFalg = true
        }
        goodsSku[item][1][index].prizeCost = val
        // prizeData[item][1][index].prizeCost = val
        break;
      case "prizeName":
        if (val.target.value) {
          goodsSku[item][1][index].prizeNameFalg = false
        } else {
          goodsSku[item][1][index].prizeNameFalg = true
        }
        goodsSku[item][1][index].prizeName = val.target.value
        // prizeData[item][1][index].prizeName = val.target.value
        break;
      // case "prizeValidityPeriod":
      //   if (val) {
      //     goodsSku[item][1][index].prizeValidityPeriodFalg = false
      //   } else {
      //     goodsSku[item][1][index].prizeValidityPeriodFalg = true
      //   }
      //   goodsSku[item][1][index].prizeValidityPeriod = val
      //   // prizeData[item][1][index].prizeValidityPeriod = val.target.value
      //   break;
      default:
        break;
    }
  }

  render() {
    const { columns, modalTitle, pageData: { pageNo, pageSize }, total, isModalVisible, prizePrefectureName, selectOptions,
      goodsSku, isDragDisabled, prizeLevel, isGoodsModalVisible, currentSku, productSku, goodsList, isCoupons, couponSelectedKeys,
      fileList, confirmLoading
    } = this.state;
    return (<DragDropContext onDragEnd={this.onDragEnd}
      onBeforeCapture={this.onBeforeCapture}
      onBeforeDragStart={this.onBeforeDragStart}
      onDragStart={this.onDragStart}
      onDragUpdate={this.onDragUpdate}
    >
      <div className="PromotionsBox">
        <TheButton type="default" size="middle" className="PromotionsAdd"
          onClick={this.addPromotions}>
          添加奖品专区
        </TheButton>
        <Droppable droppableId="mymodal">
          {(provided) => (
            <ul className="PromotionsList" ref={provided.innerRef}
              {...provided.droppableProps}>
              {
                goodsSku.map((item, index) => {
                  return (
                    <div>
                      <Draggable isDragDisabled={isDragDisabled}
                        draggableId={'DraggableId_' + item[0]} index={index}
                        key={item[0] + 'Draggable_Key'}>
                        {(provided) => (
                          <li key={'Promotions-' + item[0]} ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}>
                            <div style={{ paddingBottom: 20 }}
                              onMouseEnter={() => this.onMouseEnter}>
                              <Space >
                                <span style={{ fontWeight: 600 }} onClick={() => this.editPromotions(item)}>{item[0]}</span>
                                <TheButton type="default" size="middle"
                                  className="goodsAdd"
                                  onClick={() => this.addGoods(item[0], item[1], index)}>
                                  添加实物奖品
                                </TheButton>
                                <TheButton type="default" size="middle"
                                  className="goodsAdd"
                                  onClick={() => this.addCoupons(item[0], item[1], index)}>
                                  添加优惠券
                                </TheButton>
                                <TheButton type="default" size="middle"
                                  className="goodsAdd"
                                  onClick={() => this.addHhd(item[0], item[1], index)}>
                                  添加哈哈豆
                                </TheButton>
                                <TheButton type="default" size="middle"
                                  className="goodsAdd"
                                  onClick={() => this.addPetCoin(item[0], item[1], index)}>
                                  添加宠币
                                </TheButton>
                                <span style={{ color: "red" }}>中奖权重</span>
                                <span>
                                  <Input type='number' defaultValue={item[5]} min={1} max={1000000} precision={0} style={{ width: "100px" }} onChange={(value) => this.prizeWeight(value, index)} />
                                  {
                                    item[8] && !item[5] && <span style={{
                                      color: 'red',
                                      fontSize: 12,
                                      transform: "scale(1)"
                                    }}>请填写中奖权重</span>
                                  }
                                </span>
                                <span>{prizeLevel[item[4] - 1]}</span>
                                {parseInt(item[4]) === 1 && <span>参与 <InputNumber defaultValue={item[6]} min={1} max={100} style={{ width: "100px" }} placeholder='请填写次数' onChange={(value) => this.prizeMinimum(value, index)} /> 次，解锁奖品</span>}
                                <Popconfirm title="是否确认移除？" okText="是" cancelText="否" onConfirm={() => {
                                  this.delPromotions(item[0], index)
                                }}>
                                  <TheButton type="default" size="middle" className="goodsAdd">
                                    移除专区
                                  </TheButton>
                                </Popconfirm>
                              </Space>
                            </div>
                            {
                              item[1].length > 0 &&
                              <table
                                className={`table`}
                                border={1}>
                                <thead className="thead">
                                  <tr>
                                    {columns.map((th, th_index) => {
                                      return <th
                                        key={new Date() + "th" + th_index}
                                        className="td">{th.title}</th>
                                    })}
                                  </tr>
                                </thead>
                                <tbody className="tbody">
                                  {
                                    item[1].map((data, data_index) => {
                                      return <tr className={["tr", ''].join(' ')}
                                        key={new Date() + data_index}>
                                        <td className="td">{data.prizeOpenid}</td>
                                        <td className="td">{data.prizeOriginalName}</td>
                                        <td className="td">
                                          {(data.prizeType === "HHD" || data.prizeType === "CB") && <Input
                                            defaultValue={data.prizeCount} type='number' min={1} max={9999}
                                            onChange={(val) => this.prizeDataChange("prizeCount", val, index, data_index)} />}
                                          {data.prizeCountFalg && <span style={{
                                            color: 'red',
                                            fontSize: 12,
                                            transform: "scale(1)"
                                          }}>请填写数量</span>}
                                        </td>
                                        <td className="td">
                                          <Input maxLength={20} defaultValue={data.prizeName} onChange={(val) => this.prizeDataChange("prizeName", val, index, data_index)} />
                                          {data.prizeNameFalg && <span style={{
                                            color: 'red',
                                            fontSize: 12,
                                            transform: "scale(1)"
                                          }}>请填写奖品名称</span>}
                                        </td>
                                        <td className="td">
                                          <TheUpload accept={['image/png', 'image/jpg', 'image/jpeg',]} maxSize={1} getFileResult={(value) => this.getFileResult(index, value, data_index)} len={1} fileList={data.fileList.length >= 0 ? data.fileList : [{ uid: '-1', name: '', url: data.prizeImages }]} />
                                          {data.prizeImagesFalg && <span style={{
                                            color: 'red',
                                            fontSize: 12,
                                            transform: "scale(1)"
                                          }}>请选择图片上传</span>}
                                        </td>
                                        <td className="td">
                                          <InputNumber defaultValue={data.prizeCost} precision={0} min={1} max={9999} onChange={(val) => this.prizeDataChange("prizeCost", val, index, data_index)} />
                                          {data.prizeCostFalg && <span style={{
                                            color: 'red',
                                            fontSize: 12,
                                            transform: "scale(1)"
                                          }}>请填写商品价值</span>}
                                        </td>
                                        {/* <td className="td">
                                          {data.prizeType === "YHQ" && data.prizeValidityPeriod}
                                          {
                                            data.prizeType === "SW" && <InputNumber precision={0} min={1} max={90} defaultValue={data.prizeValidityPeriod} onChange={(val) => this.prizeDataChange("prizeValidityPeriod", val, index, data_index)} />
                                          }
                                          {data.prizeValidityPeriodFalg && <span style={{
                                            color: 'red',
                                            fontSize: 12,
                                            transform: "scale(1)"
                                          }}>请填写有效期</span>}
                                        </td> */}
                                        <td className={`td ""}`}
                                          style={{ background: '#fff' }}>
                                          <Popconfirm
                                            title="是否确认移除？"
                                            okText="是"
                                            cancelText="否"
                                            onConfirm={() => this.delGoods(data, data_index)}>
                                            <TheButton
                                              style={{ color: '#ff4d4f' }}>删除</TheButton>
                                          </Popconfirm>
                                        </td>
                                      </tr>

                                    })
                                  }
                                </tbody>
                              </table>
                            }
                          </li>
                        )}
                      </Draggable>
                      {
                        item[7] && item[1].length === 0 &&
                        <div style={{
                          color: 'red',
                          fontSize: 12,
                          transform: "scale(1)"
                        }}>请选择活动奖品</div>
                      }
                    </div>
                  )
                })
              }
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
        <Modal title={modalTitle} visible={isModalVisible} onOk={this.handleOk}
          onCancel={this.handleCancel} confirmLoading={confirmLoading}>
          <Form
            ref={this.formRef}
            initialValues={{
              prizePrefectureName: prizePrefectureName
            }}
          >
            <Form.Item name="prizePrefectureName" rules={[{ required: true, message: '请输入专区名称!' }]} >
              <Input placeholder='请输入专区名称' style={{ width: '100%' }} maxLength={10} />
            </Form.Item>
            <Form.Item name="prizeLevel" rules={[{ required: true, message: '请选择奖品等级!' }]} >
              <Select placeholder='请选择奖品等级' style={{ width: '100%' }} options={selectOptions} />
            </Form.Item>
          </Form>
        </Modal>
        <Modal title="添加商品" visible={isGoodsModalVisible} width="40%"

          onCancel={() => {
            this.addFormRef.current.resetFields()
            this.setState({ isGoodsModalVisible: false, productSku: {}, currentSku: {} })
            Modal.destroyAll()
          }}
          footer={null}
        >
          <Form
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 16,
            }}
            ref={this.addFormRef}
            onFinish={(values) => this.onFinishAdd(values)}
          >
            <Row>
              <Col span={24}>
                <Form.Item
                  label="选择商品"
                  name="goodsId"
                  rules={[
                    {
                      required: true,
                      message: '请选择商品!',
                    },
                  ]}
                >
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => this.selectFilter(input, option)}
                    style={{
                      width: '100%',
                    }}
                    onSearch={(e) => this.onBlur(e)}
                    onSelect={(e, obj) => this.goodsChange(e, obj)}
                    placeholder="请选择商品"
                  >
                    {
                      goodsList.map(item => <Option option={item} key={item.goodsId} value={item.goodsId}>{item.goodsName}</Option>)
                    }
                  </Select>

                </Form.Item >
              </Col>
              <Col span={24}>
                {
                  productSku.hasOwnProperty('goodsInfo') ?
                    <Form.Item
                      wrapperCol={{
                        offset: 4,
                        span: 16,
                      }}
                    >
                      <div className='goodsDesc'>
                        <div className='info'>
                          <img src={currentSku.imageFile ? currentSku.imageFile.split(',')[0] : ''} alt="商品图片" className='goodsImg' />
                          <div className="goodsInfo">
                            <div className='name'>{productSku.goodsInfo.goodsName}</div>
                            <div className='stock' >
                              物料名称：{currentSku.materialName}
                            </div>
                            <div className='stock' >
                              物料ID：{currentSku.materialId}
                            </div>
                            <div className='stock' >
                              可售库存：{currentSku.stock}
                            </div>
                            <div className='stock' >
                              待出库存：{currentSku.waiteOutCount}
                            </div>
                            <div className='stock' >
                              实际库存：{currentSku.realStock}
                            </div>
                          </div>
                        </div>
                        <div className='goodsSku'>
                          {
                            productSku.skuInfo.map(item =>
                              <Tag className='tag' key={item.SKUId} color={item.SKUId === currentSku.SKUId ? "cyan" : ''} onClick={() => this.triggerSkuTag(item)}>
                                {item.skuAttribute.map(item2 => item2.value).join(',')}
                              </Tag>
                            )
                          }

                        </div>
                      </div>
                    </Form.Item> : null
                }
              </Col>
              <Col>
                <Form.Item wrapperCol={{
                  offset: 8,
                  span: 16,
                }}>
                  <Space size="small" style={{ marginLeft: 10 }}>
                    <Button type="default" onClick={() => this.reset()}>
                      重置
                    </Button>
                    <Button type="primary" htmlType="submit">
                      确定
                    </Button>
                  </Space>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
        {isCoupons && <Coupons visible={isCoupons} activityEndTime={this.props.activityEndTime} selectedRowKeys={couponSelectedKeys} handleCancel={this.handleCouponCancel} handleOk={this.handleCouponOk} />}
      </div>
    </DragDropContext>)
  }
}

Prize.propTypes = {
  PrizeSource: PropTypes.array,
}
Prize.defaultProps = {
  PrizeSource: [],

}

export default Prize